<script setup lang="ts">
/**
 * @name StatisticalIndicators
 * @description 统计指标管理
 */
import { Delete, Edit } from '@element-plus/icons-vue'
import IndicatorStepsDialog from './components/IndicatorStepsDialog.vue'
import { useStatisticalIndicators, INDICATOR_SOURCE } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'
import { PAGING } from '@/constant'

import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'
import { CONTAIN_SUB } from '@/enum/modules/public'

const [isAdd, setIsAdd] = useState(false)
const [point, setPoint] = useState<Point | null>(null)
const containSub = ref<CONTAIN_SUB>(CONTAIN_SUB.NO_SUB)
const {
  lists,
  loading,
  columns,
  pagination,
  queryIndicatorsByPage,
  deleteStatisticalIndicator,
} = useStatisticalIndicators()
const keyword = ref('')
const [indicatorId, setIndicatorId] = useState<number>(0)

const indicatorStepsDialogRef
  = ref<InstanceType<typeof IndicatorStepsDialog>>()

function handleClickNode(o: Point) {
  setPoint(o)
}
function getTableData() {
  const { pageNumber, pageSize } = pagination
  const pointId = unref(point)?.id
  if (pointId) {
    queryIndicatorsByPage({
      pageNumber,
      pageSize,
      pointId,
      keyword: unref(keyword),
      containSub: unref(containSub),
      source: INDICATOR_SOURCE.STATISTICAL,
    })
  }
}

function handleClickSearch() {
  pagination.pageNumber = 1
  getTableData()
}

async function handleClickAdd() {
  if (!unref(point)) {
    ElMessage.warning('请先选择用能单元')
    return
  }
  setIsAdd(true)
  setIndicatorId(0)
  await nextTick()
  indicatorStepsDialogRef.value?.open()
}

async function clickEdit(row: StatisticalIndicator) {
  if (row.id) {
    setIsAdd(false)
    setIndicatorId(row.id)
    await nextTick()
    indicatorStepsDialogRef.value?.open()
  }
}

async function clickDelete(row: StatisticalIndicator) {
  if (row.id) {
    await deleteStatisticalIndicator(row.id, getTableData)
  }
}

watchEffect(() => {
  const pointId = unref(point)?.id
  if (pointId) {
    getTableData()
  }
})
</script>

<template>
  <div class="padding-sm flex gap-4 container">
    <div class="points-container flex-shrink-0">
      <ReadonlyPointTree
        fire
        :need-full-name="1"
        @click-node="handleClickNode"
      />
    </div>
    <div
      class="flex flex-1 flex-col overflow-auto"
    >
      <TableLists
        :loading="loading"
        :columns="columns"
        :lists="lists"
      >
        <template #actions>
          <ElForm inline>
            <ElFormItem>
              <ContainSubRadio v-model="containSub" />
            </ElFormItem>
            <ElFormItem label="关键字">
              <ElInput
                v-model="keyword"
                clearable
                placeholder="指标名称/指标编码"
              />
            </ElFormItem>
            <ElFormItem>
              <SearchButton
                @click="handleClickSearch"
              />
              <AddButton
                @click="handleClickAdd"
              />
            </ElFormItem>
          </ElForm>
        </template>
        <template #operate="{ row }">
          <TdButton
            title="编辑"
            :icon="Edit"
            type="primary"
            @click="clickEdit(row)"
          />
          <TdButton
            title="删除"
            :icon="Delete"
            type="danger"
            @click="clickDelete(row)"
          />
        </template>
      </TableLists>
      <ListsPagination
        v-model:page-num="pagination.pageNumber"
        v-model:page-size="pagination.pageSize"
        class="self-end"
        :total="pagination.total"
        :page-sizes="[5, ...PAGING.PAGE_SIZES]"
        @current-change="getTableData"
        @size-change="getTableData"
      />

      <!-- 指标步骤弹框 -->
      <IndicatorStepsDialog
        v-if="point"
        ref="indicatorStepsDialogRef"
        :indicator-id="indicatorId"
        :point="point"
        :is-add="isAdd"
        @save-success="getTableData"
      />
    </div>
  </div>
</template>
